<template>
	<view>
		<u-navbar :autoBack="true" :is-fixed='false'>
			<view slot='center' class="nav-center">
				{{title}}
			</view>
			<view slot='right' class="nav-right">
				<u-icon name="search" size='22' @click="search"></u-icon>
				<u-icon name="shopping-cart" size='22'></u-icon>
			</view>
		</u-navbar>
		<!-- 课程筛选 -->
		<view class="filter">
			<view v-for="(item) in filterList" :key="item.id">
				<view @click="changeTabs(item.id)" class="filter-item" :class="item.id == current? 'active':''">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 课程列表 -->
		<view class='re-lo'>
			<scroll-view scroll-y="true" :style='"height:" +swiperHeight + "px"' @scrolltolower="lower">
				<view class='new-list' v-if="courseList.length >0">
					<view class='new-list-item' v-for='item in courseList' :key='item.id'>
						<view class='new-item-img'>
							<image :src="item.courseCover"></image>
						</view>
						<view class='new-item-main'>
							<view class='new-item-title'>{{ item.courseName }}</view>
							<view class='new-item-type'>{{ courseType(item.courseLevel) }}</view>
							<view class='new-item-total'>
								<view class='new-item-price' v-if=" item.discountPrice ==0">
									<view>免费</view>
								</view>
								<view class='new-item-price' v-else>
									<view>限时优惠</view>
									<view class='new-item-discountPrice'>¥ {{ item.discountPrice }}</view>
								</view>
								<view class='new-item-number'>{{ courseNumber(item.clicks) }}人学习</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					暂无展示数据！！！
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		searchCourse
	} from '@/api/course.js'
	import {
		mixin
	} from '@/mixins/mixin.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				title: '',
				filterList: [{
					id: 0,
					name: '综合'
				}, {
					id: 1,
					name: '最新课程'
				}, {
					id: 2,
					name: '浏览最多'
				}, ],
				current: 0,
				courseList: [],
				courseParams: {
					pageNum: 1,
					pageSize: 10,
					entity: {
						sortBy: "",
						courseName: ''
					}
				},
				swiperHeight: 0,
				isTas: false
			}
		},
		onLoad(e) {
			this.title = e.key
			this.courseParams.entity.courseName = e.key
			//查询课程
			this.getSearchCourse()
		},
		onReady() {
			this.swiperHeight = this.getHeight('.u-navbar--fixed', '.filter') + 30
		},
		methods: {
			changeTabs(id) {
				this.current = id
				this.isTas = true
				this.courseParams.pageNum = 1
				switch (id) {
					case 0:
						this.courseParams.entity.sortBy = ''
						break;
					case 1:
						this.courseParams.entity.sortBy = 'time-desc';
						break;
					case 2:
						this.courseParams.entity.sortBy = 'clicks-desc';
						break;
				}
				this.getSearchCourse()
			},
			// 获取大家都在看的数据
			getSearchCourse() {
				searchCourse(this.courseParams).then(res => {
					if (this.isTas) {
						this.courseList = res.pageInfo.list
					} else {
						this.courseList = [...this.courseList, ...res.pageInfo.list];
					}
				})
			},
			// 触底触发
			lower() {
				this.isTas = false
				this.courseParams.pageNum++
				this.getSearchCourse()
			},
			// 进入搜索页
			search(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			}
		}
	}
</script>

<style>
	.nav-center {
		font-size: 38rpx;
	}

	.nav-right {
		display: flex;
	}

	.filter {
		padding-top: 108rpx;
		display: flex;
		justify-content: space-between;

	}

	.filter-item {
		padding: 0 33rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #a0a4ad;
	}

	.filter-item.active {
		color: #0648ff;
		font-weight: 700;
	}

	.re-lo {
		padding: 14rpx;
	}

	.new-title-more {
		font-size: 26rpx;
		font-weight: 400;
		color: #A0A4AD;
	}

	.new-list-item {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
	}

	.new-list-item:after {
		content: '';
		position: absolute;
		bottom: -20rpx;
		margin-top: 40rpx;
		width: 100%;
		border-bottom: 1px solid #000000;
		opacity: 0.15;
	}

	.new-item-img {
		width: 237rpx;
		height: 186rpx;
		border-radius: 12rpx;
		background-color: #ccc;
	}

	.new-item-img image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}

	.new-item-main {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 186rpx;
		padding-left: 23rpx;
	}

	.new-item-title {
		font-size: 29rpx;
		font-weight: 400;
		color: #191919;
	}

	.new-item-type {
		font-size: 24rpx;
		font-weight: 400;
		color: #C5C5C5;
	}

	.new-item-total {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.new-item-price {
		display: flex;
		font-size: 21rpx;
		color: #FF4B5C;
		font-weight: 600;
	}

	.new-item-number {
		font-size: 21rpx;
		font-weight: 400;
		color: #A0A4AD;
	}

	.new-item-discountPrice {
		padding-left: 21rpx;
	}

	/deep/ ::-webkit-scrollbar {
		display: block;
		width: 0px !important;
		height: 0px !important;
	}
</style>